<template>
    <div class="map" id="map">
    </div>

    <!-- 弹框 -->
    <div id="popup">
        <div class="section-1">
            <div style="display: flex; align-items: center;">
                <img class="location" src="@/assets/img/location.png" alt="">
                <div id="title" class="title">行知楼</div>
            </div>

            <div class="close" @click="closeDialog()">
                <img src="@/assets/img/x.png" alt="">
            </div>
        </div>

        <ul>
            <li class="content">
                2022-09-07 09:46:21在四川雅安市石棉县发生M3.1级地震，震源深度9千米，震中位于北纬29.42度，东经102.16度，距离本地1391km.
            </li>
        </ul>
        <div style="display: flex;">
            <div style="padding:1%" @click="openVideo(1)">
                <img class="pop-img" src="@/assets/img/4.jpg" alt="">
                <div class="img-title">周边城市</div>
            </div>
            <div style="padding: 1%;" @click="openVideo(2)">
                <img class="pop-img" src="@/assets/img/6.jpg" alt="">
                <div class="img-title">周边台站</div>
            </div>
            <div style="padding: 1%;" @click="openVideo(2)">
                <img class="pop-img" src="@/assets/img/5.jpg" alt="">
                <div class="img-title">断裂分布</div>
            </div>
        </div>
    </div>
    <div id="popup2">
        <div class="video-contain">
            <div class="close2" @click="closeDialog2()">
                <img src="@/assets/img/x.png" alt="">
            </div>
            <video id="video1" width="100%" height="100%" controls>
                您的浏览器不支持 HTML5 video 标签。
            </video>
            <video id="video2" width="100%" height="100%" controls>
            </video>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts/extension/bmap/bmap' // bmap用来处理百度地图
import { ref, onMounted, reactive } from 'vue'
import mapBaiduCommon from '@/common/js/mapBaiduCommon'
import bus from '../../utils'
import imgUrl from '@/assets/img/geolocation_marker_heading.png' //引入自定义图标的图片，后面会用到

export default {
    name: 'mapEcharts1',
    data() {
        return {
            mapType: "geo",
            manCodeLon: 104.072073,
            manCodeLat: 30.583677,
            mapMode: "2",
            levelMode: "size",
            colorRangeArray: [
                { min: Number.MIN_SAFE_INTEGER, max: 1, color: "#dde4fd" },
                { min: 1, max: 3, color: "#85eaf4" },
                { min: 3, max: 4, color: "#7cffbb" },
                { min: 4, max: 5, color: "#caff39" },
                { min: 5, max: 6, color: "#ffdc00" },
                { min: 6, max: 7, color: "#ffa600" },
                { min: 7, max: 8, color: "#ff3500" },
                { min: 8, max: 9, color: "#e10000" },
                { min: 9, max: Number.MAX_SAFE_INTEGER, color: "#c80000" }
            ],
            sizeRangeArray: [
                { min: Number.MIN_SAFE_INTEGER, max: 3, size: 11 },
                { min: 3, max: 5, size: 14 },
                { min: 5, max: 7, size: 20 },
                { min: 7, max: Number.MAX_SAFE_INTEGER, size: 20 }
            ],
            res_data: [{ "city": "珠海市", "address": "珠海市香洲区", "coordinates": [113.55,22.25]}],
            yujingDataMap: {}, //预警全局数据
            subaoDataMap: {},//速报全局数据
            myChart: null,
            eqrDatas: [],  //地震速报数据数组
            lastEqrData: [],  //最新地震速报
            lastEewData: [], //最新地震预警
            lastCatalogDataMapList: [], //最新地震速报列表
            type: 0,
        }
    },
    methods: {
        initMap() {
            //直接引用进来使用
            var echarts = require('echarts');
            // 基于准备好的dom，获取main节点init初始化echarts实例
            this.myChart = echarts.init(document.getElementById('map'));

            var that = this

            var option = {
                title: {
                    text: '',
                    left: 'center',
                },
                // 使用echarts配置地图
                bmap: {
                    center: [this.manCodeLon, this.manCodeLat],
                    zoom: 5,
                    roam: true,
                    mapStyle: mapBaiduCommon.getMapMode(0),
                },
                tooltip: {
                    trigger: 'item',
                },
                series: [
                    {
                        name: 'assets',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: this.datas,
                        symbolSize: function (val) {
                            return val[2] / 5
                        },
                        encode: {
                            value: 2,
                        },
                        label: {
                            position: 'top',
                        },
                        itemStyle: {
                            color: 'red',
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                    },
                    {
                        name: 'last_eq',
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: this.last_datas,
                        symbolSize: function (val) {
                            return val[2] / 5
                        },
                        encode: {
                            value: 2,
                        },
                        label: {
                            position: 'top',
                        },
                        itemStyle: {
                            color: 'red',
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                    },
                    {
                        name: 'locCenter',
                        type: 'custom',  //type的值为'custom'时，表示自定义图标
                        coordinateSystem: 'bmap',
                        data: this.res_data,
                        label: {
                            position: 'bottom',
                        },
                        renderItem(params, api) {
                            let coordinates = that.res_data[params.dataIndex].coordinates //把坐标数据取出来
                            //具体实现自定义图标的方法
                            return {
                                type: 'image',
                                style: {
                                    image: imgUrl, // 自定义的图片地址（上面引入，也可直接写图片的网络地址）
                                    x: api.coord(coordinates)[0], // 图标的经度    必须使用 api.coord（）方法对坐标进行转化之后位置才正确

                                    y: api.coord(coordinates)[1], //图标的纬度
                                    width: 22, // 图标大小设置
                                    height: 37,
                                },
                            };
                        },
                    }
                ],
            };

            this.myChart.setOption(option)
            this.myChart.on('click', (params) => {
                console.log('click', params)
                this.openDialog(params.name);
            })
            // 使用百度api来配置
            let bmap = this.myChart.getModel().getComponent('bmap').getBMap()
            bmap.disableDoubleClickZoom() //阻止双击放大

        },
        updateEqrData(lastOneCatalogDataMap, curLastCatalogDataMapList) {
            this.lastCatalogDataMapList = curLastCatalogDataMapList
            this.lastEqrData = lastOneCatalogDataMap
        },
        updateEEWData(lastOneEEWDataMap) {
            this.lastEewData = lastOneEEWDataMap
        },
        refreshData(type) {
            console.log('refreshData type=' + type)

            if (type == 0) {
                var option = this.myChart.getOption();
                option.series[0].data = this.eqrDatas;
                option.series[1].data = this.lastEqrData;
                this.myChart.setOption(option);
            } else if (type == 1) {
                var option = this.myChart.getOption();
                option.series[0].data = this.eqrDatas;
                option.series[1].data = this.lastEewData;
                this.myChart.setOption(option);
            } else if (type == 2) {
                var option = this.myChart.getOption();
                option.series[0].data = this.lastCatalogDataMapList;
                option.series[1].data = [];
                this.myChart.setOption(option);
            }


        },

        openDialog(val) {
            document.getElementsByClassName("title")[0].innerHTML = val;
            document.getElementById("popup").style.display = 'block';
            document.getElementById("popup").className = 'fadein';
        },
        closeDialog() {
            document.getElementById("popup").className = 'fadeout';
            setTimeout(() => {
                document.getElementById("popup").style.display = 'none';
            }, 500);
        },
        closeDialog2() {
            document.getElementById("popup2").className = 'fadeout';
            setTimeout(() => {
                document.getElementById("popup2").style.display = 'none';
            }, 500);
            document.getElementById("popup").style.display = 'block';
            document.getElementById("popup").className = 'fadein';
        },
        openVideo(id) {
            document.getElementById("popup").className = 'fadeout';
            setTimeout(() => {
                document.getElementById("popup").style.display = 'none';
            }, 500);
            document.getElementById("popup2").style.display = 'block';
            document.getElementById("popup2").className = 'fadein';
            if (id == 1) {
                document.getElementById("video1").style.display = 'block';
                document.getElementById("video2").style.display = 'none';
            } else {
                document.getElementById("video1").style.display = 'none';
                document.getElementById("video2").style.display = 'block';
            }
        },
    },
    mounted() {
        this.initMap();
        bus.off('upadateActive')
        bus.on('upadateActive', val => {
            this.refreshData(val)
        })
    },
}
</script>
<style>
.map {
    width: 100%;
    height: 100%;
}

/* 地图点击弹框 */
#popup {
    position: absolute;
    width: 600px;
    height: 400px;
    z-index: 999;
    top: 30%;
    left: 30%;
    display: none;
    background: url(@/assets/img/bg_box1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: initial;
    opacity: 0.9;
    padding: 2%;
}

#popup2 {
    position: absolute;
    width: 600px;
    height: 400px;
    z-index: 999;
    top: 30%;
    left: 30%;
    display: none;
    background: url(@/assets/img/bg_box1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: initial;
    opacity: 0.9;
    padding: 1% 2% 2% 2%;
}

.video-contain .close2 img {
    width: 49px;
    height: 49px;
    float: right;
}

#video1,
#video2 {
    display: none;
}

.section-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-1 .title {
    color: #fff;
    font-size: 24px;
}

.section-1 .close img {
    width: 49px;
    height: 49px;
}

.location {
    width: 16px;
    height: 23px;
    margin-right: 10px;
}

.content {
    color: #8cfeff;
    font-size: 18px;
    margin: 20px 0;
    text-align:left;
}

.pop-img {
    width: 202px;
    height: 130px;
}

.img-title {
    text-align: center;
    color: #8cfeff;
    font-size: 12px;
}

/* 弹出弹框 */
.fadein {
    animation: fadein .5s;
    -moz-animation: fadein .5s;
    /* Firefox */
    -webkit-animation: fadein .5s;
    /* Safari 和 Chrome */
    -o-animation: fadein .5s;
    /* Opera */
}

@keyframes fadein {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
}

@-moz-keyframes fadein

/* Firefox */
    {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
}

@-webkit-keyframes fadein

/* Safari 和 Chrome */
    {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
}

@-o-keyframes fadein

/* Opera */
    {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }
}

/* 关闭弹框 */
.fadeout {
    animation: fadeout .5s;
    -moz-animation: fadeout .5s;
    /* Firefox */
    -webkit-animation: fadeout .5s;
    /* Safari 和 Chrome */
    -o-animation: fadeout .5s;
    /* Opera */
}

@keyframes fadeout {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }

    100% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }
}

@-moz-keyframes fadeout

/* Firefox */
    {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }

    100% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }
}

@-webkit-keyframes fadeout

/* Safari 和 Chrome */
    {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }

    100% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }
}

@-o-keyframes fadeout

/* Opera */
    {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }

    100% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5);
        opacity: 0;
    }
}
</style>